﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="CompareRoutes.aspx.cs" Inherits="DBWTProject.route.CompareRoutes" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            //shared values
            var width = 400;
            var height = 200;

            //Total distance
            var data = google.visualization.arrayToDataTable(<%=GetDataTable("Distance") %>);
            var options = {
                //title: 'Comparing Total Distance',
                //hAxis: { title: 'Characteristic'},
                vAxis: { title: 'Distance (km)', viewWindow: {min:0} },
                width: width,
                height: height,
                legend: 'bottom'
            };
            var chart = new google.visualization.ColumnChart(document.getElementById('distance_div'));
            chart.draw(data, options);

            //Total duration
            var data = google.visualization.arrayToDataTable(<%=GetDataTable("DurationInHours") %>);
            var options = {vAxis: { title: 'Duration (h)', viewWindow: {min:0} }, width: width, height: height, legend: 'bottom'};
            var chart = new google.visualization.ColumnChart(document.getElementById('duration_div'));
            chart.draw(data, options);

            //Elevation covered
            var data = google.visualization.arrayToDataTable(<%=GetDataTable("Elevation") %>);
            var options = {vAxis: { title: 'Elevation (m)', viewWindow: {min:0} }, width: width, height: height, legend: 'bottom'};
            var chart = new google.visualization.ColumnChart(document.getElementById('elevation_div'));
            chart.draw(data, options);

            //Mean speed
            var data = google.visualization.arrayToDataTable(<%=GetDataTable("MeanSpeed") %>);
            var options = {vAxis: { title: 'MeanSpeed (km/h)', viewWindow: {min:0} }, width: width, height: height, legend: 'bottom'};
            var chart = new google.visualization.ColumnChart(document.getElementById('speed_div'));
            chart.draw(data, options);

            //Elevation Profile
            var data = google.visualization.arrayToDataTable(<%=GetDataTableForProfile(ProfileName.HEIGHT_PROFILE) %>);
            var options = {
                curveType: 'function',
                legend : {position: 'bottom'},
                width: 800,
                height: 500,
                hAxis: {title: 'Distance (km)'},
                vAxis: {title: 'Height (m)'},
                interpolateNulls : true
            };
            var chart = new google.visualization.LineChart(document.getElementById('elevation_profile_div'));
            chart.draw(data, options);

            //Speed Profile
            var data = google.visualization.arrayToDataTable(<%=GetDataTableForProfile(ProfileName.SPEED_PROFILE) %>);
            var options = {
                curveType: 'function',
                legend : {position: 'bottom'},
                width: 800,
                height: 500,
                hAxis: {title: 'Distance (km)'},
                vAxis: {title: 'Speed (km/h)', minValue: 0},
                interpolateNulls : true
            };
            chart = new google.visualization.LineChart(document.getElementById('speed_profile_div'));
            chart.draw(data, options);

        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Compare Routes</h2>
    <h3>
        Comparison summary</h3>

    <asp:GridView ID="grvCompareRoutes" runat="server" AutoGenerateColumns="False" CellPadding="10" CssClass="datatable">
        <Columns>
            <asp:BoundField DataField="Name" HeaderText="Name" />
            <asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" />
            <asp:BoundField DataField="Date" HeaderText="Date" DataFormatString="{0:dd.MM.yy}" />
            <asp:BoundField DataField="Distance" DataFormatString="{0:n1} km" HeaderText="Distance" />
            <asp:BoundField DataField="DurationInHours"  DataFormatString="{0:n1} h" HeaderText="Duration" />
            <asp:BoundField DataField="Elevation" DataFormatString="{0:n1} m" HeaderText="Elevation" />
            <asp:BoundField DataField="MeanSpeed" DataFormatString="{0:n1} km/h" HeaderText="MeanSpeed" />
        </Columns>
    </asp:GridView>

    <table>
        <tr>
            <td>
                <h3>
                    Total distance</h3>
                <div id="distance_div" style="width: 400px; height: 200px;">
                </div>
            </td>
            <td>
                <h3>
                    Total duration</h3>
                <div id="duration_div" style="width: 400px; height: 200px;">
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <h3>
                    Elevation covered</h3>
                <div id="elevation_div" style="width: 400px; height: 200px;">
                </div>
            </td>
            <td>
                <h3>
                    Mean speed</h3>
                <div id="speed_div" style="width: 400px; height: 200px;"></div>
            </td>
        </tr>
    </table>

    <h3>Elevation profile comparison</h3>
    <div id="elevation_profile_div" style="width: 800px; height: 500px;"></div>

    <h3>Speed profile comparison</h3>
    <div id="speed_profile_div" style="width: 800px; height: 500px;"></div>

    <br />
    <asp:HyperLink ID="hylMyRoutes" runat="server" NavigateUrl="~/route/MyRoutes.aspx">back to my routes...</asp:HyperLink>
</asp:Content>
